<template>
  <div class="entirety">
    <div class="left">
      <span>A类技能配置：</span>
      <skillConfigA :ArrData="ArrData" />
    </div>
    <div class="right">
      <span>B类技能配置：</span>
      <skillConfigB :BrrData="BrrData" />
    </div>
  </div>
</template>

<script>
import skillConfigA from "./skillConfigA.vue";
import skillConfigB from "./skillConfigB.vue";

export default {
  components: { skillConfigA, skillConfigB },
  data () {
    return {
      name: "tree",
      ArrData: [
        //树的数据
        {
          id: "",
          text: "",
          depth: 1,
          skillType: '',
          classifyName: '',//商品名称
          classifySubList: [
            {
              id: "",
              depth: 2,
              skillType: '',
              classifyName: '',
              classifySubList: [
                {
                  depth: 3,
                  skillCode: "",
                  skillName: "",
                  skillType: null,
                  goodsTitle: "",
                  goodsCode: "",
                  classifyName: ''
                }
              ]
            }
          ]
        }
      ],
      BrrData: [
        //树的数据
        {
          id: "",
          text: "",
          depth: 1,
          skillType: '',
          classifyName: '',//商品名称
          classifySubList: [
            {
              id: "",
              depth: 2,
              skillType: '',
              classifyName: '',
              classifySubList: [
                {
                  depth: 3,
                  skillCode: "",
                  skillName: "",
                  skillType: null,
                  goodsTitle: "",
                  goodsCode: "",
                  classifyName: ''
                }
              ]
            }
          ]
        }
      ],
      skillType: ''
    };
  },
  mounted () {
    this.skill()
  },
  methods: {
    skill () {
      let res = require("../json/skills.json");
      let skillA = res.filter(item => { return item.skillType === 'A' })
      let skillB = res.filter(item => { return item.skillType === 'B' })
      let A = []
      let B = []
      if (res.length == 1) {
        if (res[0].skillType == 'A') {
          A = skillA[0].classifyList
          A.forEach(item => {
            item.classifySubList.forEach(item1 => {
              item1.classifyName = item1.classifySubName
              item1.skillList.forEach(item2 => {
                item2.classifyName = item2.goodsTitle
              })
              item1.classifySubList = item1.skillList
            })
          })
        } else {
          //B技能
          B = skillB[0].classifyList
          B.forEach(item => {
            item.classifySubList.forEach(item1 => {
              item1.classifyName = item1.classifySubName
              item1.skillList.forEach(item2 => {
                item2.classifyName = item2.goodsTitle
              })
              item1.classifySubList = item1.skillList
            })
          })
        }
      } else {
        // console.log('A技能和B技能')
        //A技能
        A = skillA[0].classifyList
        A.forEach(item => {
          item.classifySubList.forEach(item1 => {
            item1.classifyName = item1.classifySubName
            item1.skillList.forEach(item2 => {
              item2.classifyName = item2.goodsTitle
            })
            item1.classifySubList = item1.skillList
          })
        })
        //B技能
        B = skillB[0].classifyList
        B.forEach(item => {
          item.classifySubList.forEach(item1 => {
            item1.classifyName = item1.classifySubName
            item1.skillList.forEach(item2 => {
              item2.classifyName = item2.goodsTitle
            })
            item1.classifySubList = item1.skillList
          })
        })
      }

      //A技能
      // let nameSkill = [];
      // A.forEach((a) => {
      //   a.classifySubList.forEach((a1) => {
      //     a1.classifySubList.forEach((a2) => {
      //       nameSkill.push({ skillName: a2.skillName, skillCode: a2.skillCode });
      //     });
      //   });
      // });
      // this.nameSkills = nameSkill
      // this.Askill = nameSkill.filter((i) => {
      //   return i.skillName != null
      // });

      //B技能
      // let namesSkill = [];
      // B.forEach((a) => {
      //   a.classifySubList.forEach((a1) => {
      //     a1.classifySubList.forEach((a2) => {
      //       namesSkill.push({ skillName: a2.skillName, skillCode: a2.skillCode });
      //     });
      //   });
      // });
      // this.namesSkills = namesSkill
      // this.Bskill = namesSkill.filter((i) => {
      //   return i.skillName != null
      // });
      // console.log("arr11,,,,,,,", this.Askill);
      this.ArrData = A
      this.BrrData = B

    }
  }
};
</script>
<style scoped lang="scss">
.entirety {
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  font-size: 16px;
  .left {
    flex: 1;
    background-color: #fff;
    margin-right: 5px;
    padding: 8px;
  }
  .right {
    flex: 1;
    background-color: #fff;
    margin-left: 5px;
    padding: 8px;
  }
}
</style>
